        @charset "utf-8";

        * {
            margin: 0;
            padding: 0
        }

        ul li {
            list-style: none
        }

        img {
            border: 0
        }

        .small-img {
            display: flex;
            align-items: center;
            justify-content: center
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            line-height: 0;
            content: ""
        }

        .magnifier {
            width: 500px;
            position: relative;
          
        }

        .magnifier-container {
            width: 500px;
            height: 500px;
            overflow: hidden;
            position: relative;
            border: 1px solid #ddd
        }

        .move-view {
            width: 100px;
            height: 100px;
            position: absolute;
            background-image: url(../images/move-box.png)
        }

        .images-cover {
            height: 100%;
            width: 100%;
            position: relative
        }

        .images-cover img {
            position: absolute
        }

        .magnifier-assembly {
            height: 92px;
            overflow: hidden;
            position: relative;
            padding-left: 30px;
            padding-right: 30px
        }

        .magnifier-btn {
            position: absolute;
            font-family: 宋体;
            width: 100%;
            top: 50%;
            left: 0;
            margin-top: -40px
        }

        .magnifier-btn span {
            line-height: 80px;
            height: 80px;
            width: 20px;
            background-color: #6e6e6e;
            color: #fff;
            display: block;
            z-index: 9998;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
            border-radius: 3px
        }

        .magnifier-btn .magnifier-btn-left {
            float: left
        }

        .magnifier-btn .magnifier-btn-right {
            float: right
        }

        .magnifier-line {
            position: relative;
            overflow: hidden;
            height: 92px
        }

        .magnifier-line ul {
            display: block;
            font-size: 0;
            width: 10000%;
            position: absolute;
            left: 0;
            z-index: 9997
        }

        .magnifier-line li {
            float: left;
            width: 100px;
            cursor: pointer
        }

        .magnifier-line ul>.active .small-img {
            border-color: #bbb
        }

        .small-img {
            height: 78px;
            padding: 1px;
            margin: 5px;
            overflow: hidden;
            border: 1px solid #ddd;
            text-align: center
        }

        .small-img img {
            max-width: 100%;
            max-height: 100%
        }

        .magnifier-view {
            width: 100%;
            height: 100%;
            position: absolute;
            right: -105%;
            top: 0;
            z-index: 9999;
            background-color: #fff;
            display: none;
            overflow: hidden
        }

        .magnifier-view img {
            display: block
        }

        .animation03 {
            transition: all .3s ease-in .1s;
            -ms-transition: all .3s ease-in .1s;
            -moz-transition: all .3s ease-in .1s;
            -webkit-transition: all .3s ease-in .1s;
            -o-transition: all .3s ease-in .1s
        }